<template>
	<view class="container">
		<view class="condition-section">
			<view class="city-sel">
				<picker class="picker clamp" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" @change="bindArea()" :value="multiIndex" :range="multiArray" range-key="Name">
					<text class="city">{{cityName}}</text>
				</picker>
				<text class="iconfont">&#xea81;</text>
			</view>
			<input placeholder="请输入线下店铺名称" placeholder-class="placeholdClass" v-model="searchKey" focus="true" confirm-type="search" @confirm="search()" />
			<text class="iconfont cate" @tap="togglePopup('bottom-pay')">&#xe65c;</text>
		</view>
		<empty v-if="shopList.length === 0 && loading === false" position="100"></empty>
		<view v-else class="shop-container">
			<view class="shop-box b-b" v-for="(item,index) in shopList" :key="index" @tap="navdetail(item.Id)">
				<view class="shop-image">
					<image class="image" mode="aspectFill" :src='$image + "/merchant/" + item.DoorPic'></image>
				</view>
				<view class="shop-content"> 
					<text class="shop-line1">{{item.Name}}</text>
					<view class="shop-line2">
						<view class="shop-star">
							<text class="iconfont star"></text>
							<text class="iconfont star"></text>
							<text class="iconfont star"></text>
							<text class="iconfont star"></text>
							<text class="iconfont star"></text>
						</view>
						<text class="shop-location"></text>
					</view>
					<view class="shop-line3">
						<text class="discription">{{item.ProductInfo == "" ? "这家伙很懒，什么都没留下" : item.ProductInfo}}</text>
						<view class="distance-box" v-if="latitude != 0">
							<text class="iconfont">&#xe602;</text>
							<text class="distance">{{item.Addr}}</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<uni-popup :show="popup === 'bottom-pay'" position="top" @hidePopup="togglePopup('')">
			<view class="cate-list">
				<view class="header b-b">
					<text class="title">请选择</text>
					<text class="iconfont" @tap="togglePopup('')">&#xea80;</text>
				</view>
				<view class="content">
					<view v-for="(tab,index) in tabBars" :key="tab.Code" @tap="cateClick(tab.Code)" class="cate-item">
						<image :src="'https://nkyzapi.njkw668.com/static/cate_merchant/' + tab.Code + '.png'"></image>
						<text class="title">{{tab.Name}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import empty from "@/components/empty/merchant";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			empty,
			uniLoadMore,
			uniPopup
		},
		data() {
			return {
				tabBars:[
					{Code:"-1",Name:'全部商家',FontValue:'&#xe619;'},
				],
				popup:'',
				multiIndex: [0, 0],
				multiArray: [[],[]],
				provinceArray: [],
				cityArray: [],
				pageindex:1,
				shopList:[],
				loadingType: 'more',
				loading: true,
				cateCode: '-1',
				searchKey: '',
				cityCode: '',
				cityName: '',
				latitude: 0,
				longitude: 0,
			};
		},
		//加载更多
		onReachBottom(){
			if(this.loadingType == 'more'){
				this.pageindex++;
				this.loadMerchants();
			}
		},
		onLoad(options) {
			this.cityCode = options.cityCode;
			this.cityName = options.cityName;
			this.latitude = options.latitude;
			this.longitude = options.longitude;
		    this.loadCategery();
			this.loadProvinceList();
			this.loadMerchants();
		},
		methods: {
			//加载省份信息
			async loadProvinceList(){
				var [error, res] = await this.getArea(1,"");
				if(res.statusCode == 200){
					this.provinceArray = res.data;
					var [error, res] = await this.getArea(2,res.data[0].Code);
					if(res.statusCode == 200){
						this.cityArray = res.data;
						this.multiArray = [
							this.provinceArray,
							this.cityArray,
						]
					}
				}
			},
			//获取区域列表
			getArea(level,parentcode){
				return uni.request({
					url: this.$url + 'Api/Area',
					data: {
						"level": level,
						"parentcode":parentcode
					},
				});
			},
			//绑定选择的城市
			bindArea(){
				this.cityName = this.multiArray[1][this.multiIndex[1]].Name;
				this.cityCode = this.multiArray[1][this.multiIndex[1]].Code;
				
				let prePage = this.$api.prePage();
				prePage.cityCode = this.cityCode;
				prePage.cityName = this.cityName;
				prePage.cityChangedByNextPage = true;

				this.pageindex = 1;
				this.loadMerchants("refresh");
			},
			//改变picker的值
			async bindMultiPickerColumnChange(e) {
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						var [error, res] = await this.getArea(2,this.provinceArray[this.multiIndex[0]].Code);
						if(res.statusCode == 200){
							this.cityArray = res.data;
							this.multiArray[1] = res.data;
							this.multiIndex.splice(1, 1, 0);
						}
						break
					case 1: //拖动第2列
						break
				}
				this.$forceUpdate()
			},
			//关键字搜索
			search(){
				uni.hideKeyboard();
				this.pageindex = 1;
				this.loadMerchants("refresh");
			},
			//跳转到商家页面
			navdetail(id){
				uni.navigateTo({
					url:'/pages/merchant/detail?id=' + id
				})
			},
			loadMerchants(type='add', loading){
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				let shopList = [];
				this.$http.get('/MerchantList',{
					"code":this.cateCode,
					"cityCode": this.cityCode,
					"searchKey": this.searchKey,
					"longitude": this.longitude,
					"latitude": this.latitude,
					"pageindex":this.pageindex
				}).then(res=>{
					let count = res.data.count;
					shopList = res.data.list;
					if(type === 'refresh'){
						this.shopList = [];
					}
					this.shopList = this.shopList.concat(shopList);
					this.loading = false;
					
					//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
					this.loadingType  = this.shopList.length >= count ? 'nomore' : 'more';
					if(type === 'refresh'){
						if(loading == 1){
							uni.hideLoading()
						}else{
							uni.stopPullDownRefresh();
						}
					}
				})
			},
			//加载店铺分类
			loadCategery(){
				this.$http.get('/BusinessType',{}).then(res=>{
					let tabbars = res.data;
					this.tabBars = this.tabBars.concat(tabbars);
				})
			},
			togglePopup(popup){
				this.popup = popup;
			},
			//选择分类
			cateClick(code){
				this.togglePopup('');
				this.cateCode = code;
				this.pageindex = 1;
				this.loadMerchants("refresh");
			},
		},
	}
</script>

<style lang="scss">
	.placeholdClass{
		// font-size: $font-base;
	}
	.condition-section{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: $block-row-spacing;
		.city-sel{
			display: flex;
			flex-direction: row;
			width: 140rpx;
			align-items: center;
			.iconfont{
				font-size: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				width: 30rpx;
			}
			.picker{
				width: 85rpx;
				.city{
					font-size: $font-base;
				}
			}
		}
		input{
			flex: 1;
			background-color: $page-color-base;
			height: 60rpx;
			padding-left: $block-row-spacing;
			font-size: $font-base;
		}
		.cate{
			width: 65rpx;
			font-size: 40rpx;
			text-align: right;
			color: $font-color-light;
		}
	}
	.shop-container {
		padding: 15upx 20upx;
	}
	.shop-box {
		display: flex;
		flex-direction: row;
		height: 200rpx;
		background-color: #fff;
		margin-bottom: $block-row-spacing;
		align-items: center;
		position: relative;
		&.b-b:after{
			left: 190rpx;
		}
		.shop-image{
			width: 190rpx;
			.image{
				width: 170rpx;
				height: 170rpx;
				opacity: 1;
				border-radius: 10upx;
			}
		}
		.shop-content{
			display: flex;
			flex-direction: column;
			flex: 1;
		}
	}
	.shop-line1{
		font-size: $font-lg;
		height: 50rpx;
	}
	.shop-line2{
		display: flex;
		flex-direction: row;
		height: 30rpx;
		.shop-star{
			height: 30rpx;
			line-height: 30rpx;
			display: flex;
			flex-direction: row;
		}
	}
	.star:before{
		content: '\e63c';
		color: $base-color;
		font-size: 22upx;
		margin-right: 8upx;
		vertical-align: middle;
	}
	.shop-line3{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		height: 90rpx;
		.discription{
			font-size: $font-sm;
			color:$font-color-light ;
			padding-top: 10upx;
			width: 350rpx;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		.distance-box{
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: flex-end;
			.iconfont{
				color: $base-color;
				font-size: 30rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
			.distance{
				font-size: $font-sm;
			}
		}
	}
	.cate-list{
		.header{
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			.title{
				width: 670rpx;
				text-align: left;
				padding-left: 34upx;
			}
			.iconfont{
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: $font-color-light;
			}
		}
		.content{
			display: flex;
			flex-wrap: wrap;
			.cate-item{
				width: 20%;
				height: 140upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.title{
					font-size: $font-sm;
				}
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>
